<template>
	<navigatorComp
		title="邀请好友"
		bgcColor="#121512"
		fontColor="#fff"
		:isWxHandle="true"
	></navigatorComp>

	<mescroll-uni
		:bottombar="false"
		:down="downOption"
		:up="upOption"
		@init="mescrollInit"
		@down="downCallback"
		@up="upCallback"
		:height="mesrollHeight + 'px'"
	>
		<view class="invite_box">
			<image
				class="avater"
				:src="headUrl || imgUrl + 'imgs/default_avater.png'"
				mode=""
			></image>
			<view class="trigle_left"></view>
			<view class="trigle_right"></view>
			<myButton
				bgcColor="#F3E0BB"
				name="邀请好友"
				width="400rpx"
				@clickBtn="openInvite"
			></myButton>
			<view class="invite_text">我的邀请码</view>
			<view class="invite_code">{{ detail.invitationCode }}</view>
			<view class="invite_text2 display_flex" @click="copyInviteCode">
				复制邀请码
				<image src="http://112.124.50.179:8888/imgs/home/copy.png" mode=""></image>
			</view>
		</view>

		<view class="invite_list" :style="{ height: height + 'px' }">
			<view class="invite_top">
				<view class="invite_top_item">
					<view>成功邀请人数</view>
					<view class="invite_top_num">
						<text>{{ detail.recordNumber }}</text>
						人
					</view>
				</view>
				<view class="invite_top_item">
					<view>累积邀请奖励</view>
					<view class="invite_top_num">
						<text>{{ detail.rewards }}</text>
						福币
					</view>
				</view>
			</view>
			<view class="invite_records">
				<view class="invite_records_title">邀请记录</view>
				<view class="invite_records_record" v-for="(item, index) in recordList">
					<image
						:src="item.headUrl || imgUrl + 'imgs/default_avater.png'"
						mode=""
					></image>
					<view>
						<view class="invite_name">{{ item.nickname }}</view>
						<view class="invite_time">
							邀请时间：{{ formatTimestamp3(item.timestamp) }}
						</view>
					</view>
				</view>
			</view>
			<!-- <scroll-view scroll-y="true" class="invite_records" :style="{ height: listHeight + 'px' }">
				</scroll-view> -->
		</view>
	</mescroll-uni>

	<!-- 分享弹框 -->
	<sharePopup v-model:show="showShare" title="邀请好友" height="592rpx"></sharePopup>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, onMounted, computed } from 'vue';
import navigatorComp from '/components/navigator/index.vue';
import myButton from '/components/button/index.vue';
import sharePopup from '/components/popup/share.vue';
import useMescroll from '@/uni_modules/mescroll-uni/hooks/useMescroll.js';
import { imgUrl } from '@/external/utils/imgUrl.js';
import MineApi from '@/API/mine/index.js';
import { formatTimestamp3 } from '@/utils/time.js';
import store from '@/store/index.js';

const mineApi = new MineApi();
const navHeight = getApp().globalData.navHeight;
const mesrollHeight = ref(0);
const recordList = ref([1, 2, 3, 5, 6, 7, 8]); //邀请记录列表
const listHeight = ref(0);
const showShare = ref(false);
const headUrl = ref(store.state.userInfo.userInfo.headUrl);
const detail = ref({});

const { mescrollInit, downCallback, getMescroll } = useMescroll(); // 调用mescroll的hook
const upOption = {
	page: {
		size: 10 // 每页数据的数量
	},
	noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
	empty: {
		use: true //不显示空图
	}
};
const downOption = ref({
	auto: false
});
const latestId = ref(0); //最后一个元素的id

onLoad(() => {
	getInfo();
});

/**
 * 获取信息
 */
const getInfo = async () => {
	let res = await mineApi.getInviteReward();
	if (res.code === 0) {
		detail.value = res.data;
	}
};

onMounted(() => {
	mesrollHeight.value = uni.getSystemInfoSync().windowHeight - getApp().globalData.navHeight;

	// #ifdef H5
	mesrollHeight.value = mesrollHeight.value - uni.upx2px(88);
	// #endif
});

/**
 * 上拉加载
 */
const upCallback = (mescroll) => {
	mineApi
		.getInviteRecord({
			latestId: latestId.value
		})
		.then((res) => {
			const curPageData = res.data.items || []; // 当前页数据
			if (latestId.value == 0) recordList.value = [];
			recordList.value = recordList.value.concat(curPageData);
			if (curPageData.length) {
				latestId.value = curPageData[curPageData.length - 1].dynamicId || 0;
			}
			mescroll.endSuccess(curPageData.length); // 请求成功, 结束加载

			tabList2.value = [
				{
					name: `个人文章(${res.data.dynamicTotal})`
				}
			];
			recordList.value.forEach((item) => {
				item.images = JSON.parse(item.picture);
				item.publisherSubstance = item.content;
			});
		})
		.catch(() => {
			mescroll.endErr(); // 请求失败, 结束加载
		});
};

const myDownCallback = (mescroll) => {
	latestId.value = 0;
	downCallback();
};

const openInvite = () => {
	showShare.value = true;
};
/**
 * 复制邀请码
 */
const copyInviteCode = () => {
	uni.setClipboardData({
		data: detail.value.invitationCode,
		success: function () {
			uni.showToast({
				title: '复制成功'
			});
		},
		fail: function (err) {
			console.log('复制失败', err);
		}
	});
};
</script>

<style lang="scss">
page {
	background-color: #121512;
	/* #ifdef H5 */
	padding-top: 0;
	/* #endif */
}

.invite_box {
	margin: 84rpx 74rpx 40rpx;
	background: #292b2a;
	display: flex;
	align-items: center;
	flex-direction: column;
	padding: 92rpx 0 50rpx 0;
	position: relative;
	border-radius: 8rpx;

	.trigle_left {
		width: 0;
		height: 0;
		border-left: 15px solid #121512;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		position: absolute;
		left: 0;
		top: 200rpx;
	}

	.trigle_right {
		width: 0;
		height: 0;
		border-right: 15px solid #121512;
		border-top: 8px solid transparent;
		border-bottom: 8px solid transparent;
		position: absolute;
		right: 0;
		top: 200rpx;
	}

	.avater {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		position: absolute;
		top: -60rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.invite_text {
		font-weight: 400;
		font-size: 32rpx;
		color: #ffffff;
		line-height: 32rpx;
		letter-spacing: 1px;
		margin-top: 56rpx;
	}

	.invite_code {
		font-weight: 500;
		font-size: 40rpx;
		color: #ffffff;
		letter-spacing: 2px;
		margin-top: 40rpx;
	}

	.invite_text2 {
		font-weight: 400;
		font-size: 28rpx;
		color: #ffffff;
		line-height: 28rpx;
		margin-top: 42rpx;

		image {
			width: 32rpx;
			height: 32rpx;
			margin-left: 8rpx;
		}
	}
}

.invite_list {
	width: 100%;
	background: #292b2a;
	border-radius: 32rpx 32rpx 0rpx 0rpx;
	padding: 48rpx 32rpx 0;
	box-sizing: border-box;

	.invite_top {
		display: grid;
		grid-template-columns: repeat(2, 1fr);

		.invite_top_item {
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 32rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			border-bottom: 1px solid #333333;
			padding-bottom: 48rpx;

			.invite_top_num {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 28rpx;
				margin-top: 24rpx;
				text {
					font-weight: 500;
					font-size: 48rpx;
					color: #ffffff;
					line-height: 48rpx;
				}
			}
		}
	}

	.invite_records {
		padding-top: 32rpx;
		.invite_records_title {
			font-weight: 400;
			font-size: 32rpx;
			color: #ffffff;
			line-height: 32rpx;
		}

		.invite_records_record {
			border-bottom: 1px solid #333333;
			padding: 32rpx 0;
			display: flex;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 24rpx;
				border-radius: 50%;
			}

			.invite_name {
				font-weight: 400;
				font-size: 28rpx;
				color: #ffffff;
				line-height: 40rpx;
				height: 40rpx;
				margin-bottom: 6rpx;
			}

			.invite_time {
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				line-height: 34rpx;
			}
		}
	}
}

::v-deep .mescroll-upwarp {
	background-color: #292b2a !important;
}
</style>
